import { Link } from "react-router-dom";

export default function QuestionCard({ question }) {
  return (
    <div className="border border-gray-200 p-4 rounded-lg  shadow-md hover:shadow-lg transition">
      <div className="flex space-x-4 text-gray-600 text-sm">
        <div className="text-center">
          <p className="font-bold">{question.votes}</p>
          <p>votes</p>
        </div>
        <div className="text-center">
          <p className="font-bold">{question.answers}</p>
          <p>answers</p>
        </div>
        <div className="text-center">
          <p className="font-bold">{question.views}</p>
          <p>views</p>
        </div>
      </div>
      <Link to={`/questionDetails/${question.id}`}>
        <h2 className="text-lg font-semibold text-blue-600 hover:underline mt-2 cursor-pointer">
          {question.title}
        </h2>
      </Link>

      <p className="text-sm text-gray-500 mt-1 line-clamp-2">
        {question.content}
      </p>

      <div className="flex flex-wrap mt-2 space-x-2">
        {question.tags.map((tag) => (
          <span
            key={tag}
            className="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-xs font-semibold mr-2 mb-2"
          >
            {tag}
          </span>
        ))}
      </div>

      <div className="text-sm text-gray-400 mt-2">
        {question.user} asked {question.time}
      </div>
    </div>
  );
}
